import React, { useState, useEffect } from 'react';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';

const HeaderContainer = styled.div`
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
`;

const Categories = styled.div`
  display: flex;
  gap: 20px;
  margin-top: 16px;
`;

const CategoryItem = styled.div`
  cursor: pointer;
  padding: 8px 16px;
  position: relative;
  
  &.active {
    color: #1890ff;
    &::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #1890ff;
    }
  }
`;

const Header = ({ categories, currentCategory, onCategoryChange }) => {
  const navigate = useNavigate();
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsSticky(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleSearch = () => {
    navigate('/search');
  };

  return (
    <HeaderContainer className={isSticky ? 'sticky' : ''}>
      <Input
        size="large"
        placeholder="搜索商品"
        prefix={<SearchOutlined />}
        onClick={handleSearch}
      />
      <Categories>
        {categories.map(category => (
          <CategoryItem
            key={category.id}
            className={currentCategory === category.id ? 'active' : ''}
            onClick={() => onCategoryChange(category.id)}
          >
            {category.name}
          </CategoryItem>
        ))}
      </Categories>
    </HeaderContainer>
  );
};

export default Header;